<template>
  <div class="hello">
    <drag-down :height="400">
      <div slot="indicator">
        <loading-indicator></loading-indicator>
      </div>
      <div slot="content">
        <div class="testContent"></div>
      </div>
    </drag-down>
  </div>
</template>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .testContent{
    height:800px;
    width: 100%;
    background: linear-gradient(top,red,blue);
  }
</style>

<script>
  let drag_down_animation = resolve => {
      require(['./drag_down_animation/index'],resolve);
  };
  let loading_indicator = resolve => {
  	require(['./loading_indicator/index.vue'],resolve);
  }

export default {
  name: 'HelloWorld',
  mounted(){
  },
  components:{
      'drag-down':drag_down_animation,
      'loading-indicator': loading_indicator
  },
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }
}
</script>

